<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;

        }
        .taobao{
            width: 306px;
            height: 252px;
            margin: 100px auto;
            position: relative;
            background-color: aqua;
        }
        .left{
            width: 50px;
            height: 250px;
            float: left;
            border: 1px solid fuchsia;
        }
        .center{
            width: 200px;
            height: 250px;
            float: left;
            border-top: 1px solid fuchsia ;
            border-bottom: 1px solid fuchsia ;
            background-image: url("tb-imgs/女靴.jpg");
        }
        .right{
            width: 50px;
            height: 250px;
            float: left;
            border: 1px solid fuchsia;

        }
        li{
            height: 27px;
            border-bottom: 1px solid fuchsia ;
        }
        /*.img2{
            background-image: url("tb-imgs/雪地靴.jpg");
        }
        .img3{
            background-image: url("tb-imgs/冬裙.jpg");
        }
        .img4{
            background-image: url("tb-imgs/呢大衣.jpg");
        }
        .img5{
            background-image: url("tb-imgs/毛衣.jpg");
        }
        .img6{
            background-image: url("tb-imgs/棉服.jpg");
        }
        .img7{
            background-image: url("tb-imgs/女裤.jpg");
        }

        .img8{
            background-image: url("tb-imgs/羽绒服.jpg");
        }
        .img9{
            background-image: url("tb-imgs/牛仔裤.jpg");
        }
        .img10{
            background-image: url("tb-imgs/女包.jpg");
        }
        .img11{
            background-image: url("tb-imgs/男包.jpg");
        }
        .img12{
            background-image: url("tb-imgs/登山鞋.jpg");
        }
        .img13{
            background-image: url("tb-imgs/皮带.jpg");
        }
        .img14{
            background-image: url("tb-imgs/围巾.jpg");
        }
        .img15{
            background-image: url("tb-imgs/皮衣.jpg");
        }
        .img16{
             background-image: url("tb-imgs/男毛衣.jpg");
         }
        .img17{
            background-image: url("tb-imgs/男棉服.jpg");
        }
        .img18{
            background-image: url("tb-imgs/男靴.jpg");
        }*/



    </style>
</head>
<body>
<div class="taobao">
    <div class="left">
        <ul class="ul1">
            <li>女靴</li>
            <li>雪地靴</li>
            <li>冬裙</li>
            <li>呢大衣</li>
            <li>毛衣</li>
            <li>棉服</li>
            <li>女裤</li>
            <li>羽绒服</li>
            <li>牛仔裤</li>
        </ul>
    </div>
    <div class="center"></div>
    <div class="right">
        <ul class="ul2">
            <li>女包</li>
            <li>男包</li>
            <li>登山鞋</li>
            <li>皮带</li>
            <li>围巾</li>
            <li>皮衣</li>
            <li>男毛衣</li>
            <li>男棉服</li>
            <li>男靴</li>
        </ul>
    </div>
</div>
<script>
    $(function () {
        $(".ul1>li").hover(function () {
            var text=$(this).text();
            $(".center").css("background-image","url(tb-imgs/"+text+".jpg)");
        },function () {

        })
        $(".ul2>li").hover(function () {
            var text=$(this).text();
            $(".center").css("background-image","url(tb-imgs/"+text+".jpg)");
        },function () {

        })
    })
</script>
</body>
</html>